<template>
  <d2-container>
    <template slot="header">
      <el-form
        :gutter="24"
        ref="search-box"
        :model="mainQuery"
        label-position="left"
        :inline="true"
        v-if="false"
      >
        <el-form-item label="上级名称" size="mini">
          <el-input
            placeholder=""
            v-model="mainQuery.parentTitle"
            @keyup.enter.native="handleSearch"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item label="节点名称" size="mini">
          <el-input
            placeholder=""
            v-model="mainQuery.title"
            @keyup.enter.native="handleSearch"
            clearable
          ></el-input>
        </el-form-item>

        <!--   <el-form-item label="URL地址" size="mini">
          <el-input placeholder="" v-model="mainQuery.url" @keyup.enter.native="handleSearch" clearable></el-input>
        </el-form-item>

        <br> -->

        <el-form-item label="类型" size="mini">
          <el-select
            v-model="mainQuery.showStatus"
            placeholder="所有"
            clearable
          >
            <el-option
              v-for="item in boolOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <!--      <el-form-item label="状态" size="mini">
          <el-select v-model="mainQuery.status" placeholder="所有" clearable>
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item> -->
      </el-form>

      <div class="search-btn-box">
        <div class="left">
          <el-button-group>
            <el-button
              class="filter-item"
              icon="el-icon-plus"
              type="success"
              @click="handleAdd"
              :loading="mainTable.loading"
              v-if="mainTable.list.length == 0"
              size="mini"
              >添加</el-button
            >
            <el-tooltip
              :disabled="!!mainTable.current"
              content="请选择一行数据"
            >
              <el-button
                class="filter-item"
                icon="el-icon-edit"
                type="default"
                @click="handleSet"
                :loading="mainTable.loading"
                size="mini"
                >修改</el-button
              >
            </el-tooltip>
          </el-button-group>
        </div>
        <div class="right">
          <!-- <el-button
            class="filter-item"
            icon="el-icon-refresh"
            type="default"
            @click="resetMainData"
            :loading="mainTable.loading"
            size="mini"
            >重置</el-button
          >
          <el-button
            class="filter-item"
            icon="el-icon-search"
            type="primary"
            @click="handleSearch"
            :loading="mainTable.loading"
            size="mini"
            >查询</el-button
          > -->
        </div>
      </div>
    </template>

    <!--主列表数据-->
    <d2-crud
      ref="d2Crud"
      :options="mainTable.options"
      :index-row="mainTable.indexRow"
      :columns="mainTable.columns"
      :data="mainTable.list"
      :selection-row="mainTable.allowSelect"
      :loading="mainTable.loading"
      :rowHandle="mainTable.rowHandle"
      @current-change="onMainCurrentChange"
      @row-dblclick="onMainDoubleClick"
      @handle-set="download"
    ></d2-crud>

    <template slot="footer">
      <el-pagination
        @size-change="handleMainSizeChange"
        @current-change="handleMainPageChange"
        :current-page="mainTable.pagination.currentPage"
        :page-sizes="mainTable.pagination.pageSizes"
        :page-size="mainTable.pagination.pageSize"
        :page-count="mainTable.pagination.pageCount"
        :total="mainTable.pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        :background="true"
      >
      </el-pagination>
    </template>

    <dialog-add
      ref="dialog-add"
      :statusOptions="statusOptions"
      :boolOptions="boolOptions"
      @dialog-close="fetchMainData"
    ></dialog-add>
  </d2-container>
</template>

<script>

import util from '@/libs/util';
import ApiNode from '@/api/system.agreement';
import FormAdd from './dialog-add';

export default {
  name: 'system-agreement',
  mixins: [
  ],
  components: {
    'dialog-add': FormAdd,
  },
  data() {
    return {

      boolOptions: util.tool.getBoolOptions(),
      statusOptions: util.tool.getStatusOptions(),

      mainQueryRaw: null,
      mainQuery: {
        parentTitle: undefined,
        title: undefined,
        url: undefined,
        showStatus: undefined,
        status: undefined,
      },

      mainTable: {
        loading: false,
        options: {
          border: true,
          stripe: true,
          highlightCurrentRow: true,
          emptyText: '暂无数据',
          size: 'mini',
        },
        // indexRow: {
        //   title:'序号',
        //   width: "80",
        //   align:'center'
        // },
        indexRow: null,
        allowSelect: false,
        columns: [
          { title: '电子协议文件名', key: 'protocolName', align: 'center', showOverflowTooltip: true },
          { title: '修改人', key: 'updateBy', align: 'center', width: '220', showOverflowTooltip: true, align: 'left' },
          { title: '修改时间', key: 'updateTime', align: 'center', width: '220', showOverflowTooltip: true, align: 'left' },
          { title: '创建时间', key: 'createTime', align: 'center', width: '220', showOverflowTooltip: true },
        ],
        rowHandle: {
          width: '160',
          align: 'center',
          fixed: 'right',
          custom: [
            {
              text: '下载协议',
              type: 'primary',
              size: 'mini',
              emit: 'handle-set'
            },

          ]
        },
        list: [],
        pagination: {
          currentPage: 1,
          pageSize: 50,
          total: 0,
          pageSizes: [50, 100, 200]
        },
        current: null,
      },

    }
  },
  mounted() {
    this.mainQueryRaw = Object.copy(this.mainQuery);
    this.resetMainData();
  },
  beforeDestroy() {
  },
  methods: {
    download(item) {
      var a = document.createElement("a");
      var event = new MouseEvent("click");
      a.download = item.row.protocolName;
      a.href = item.row.url;
      a.dispatchEvent(event);
    },
    handleSearch() {
      this.mainTable.pagination.currentPage = 1;
      this.fetchMainData();
    },

    renderMainData(re) {

      re.list.forEach(item => {
        var statusItem = this.statusOptions.find(v => v.value == item.status);
        item.strStatus = statusItem ? statusItem.label : '-';

        var showItem = this.boolOptions.find(v => v.value == item.showStatus);
        item.strShowStatus = showItem ? showItem.label : '-';
      });

      this.mainTable.list = re.list;
      this.mainTable.pagination.total = re.total;
    },

    handleMainSizeChange(val) {
      this.mainTable.pagination.pageSize = val;
      this.mainTable.pagination.currentPage = 1;
      this.fetchMainData()
    },
    handleMainPageChange(val) {
      this.mainTable.pagination.currentPage = val;
      this.fetchMainData()
    },

    buildMainQuery() {

      var query = {
        page: this.mainTable.pagination.currentPage,
        limit: this.mainTable.pagination.pageSize,
        search: this.mainQuery,
      };

      return query;
    },

    resetMainData() {

      this.mainQuery = Object.copy(this.mainQueryRaw);
      this.fetchMainData();
    },

    async fetchMainData() {

      this.mainTable.loading = true;

      try {
        var re = await ApiNode.list(this.buildMainQuery());
        this.renderMainData(re);
      } catch (err) { }

      this.mainTable.loading = false;
    },

    handleAdd() {
      console.log("?", this.$refs)

      // console.log('213s',this.$refs['dialog-add'])
      this.$refs['dialog-add'].show();
    },

    handleSet() {
      if (this.mainTable.current) {
        this.$refs['dialog-add'].show(this.mainTable.current);
      }
    },

    onMainCurrentChange(now, old) {
      this.mainTable.current = now;
    },

    onMainDoubleClick(now) {
      this.mainTable.current = now;
      this.handleSet();
    },
  }
}
</script>

<style>
</style>
